"use client";

import { useState, useEffect, useRef } from "react";
import { motion } from "framer-motion";
import {
  FiSearch,
  FiPlus,
  FiEdit,
  FiTrash2,
  FiUserPlus,
  FiShield,
  FiChevronDown,
  FiChevronLeft,
  FiChevronRight,
  FiFilter,
  FiMail,
  FiPhone,
} from "react-icons/fi";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { Toaster } from "@/components/ui/sonner";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

// 模拟用户数据
const mockUsers = [
  {
    id: 1,
    name: "张三",
    email: "zhangsan@example.com",
    avatar: "/avatars/avatar-1.jpg",
    role: "管理员",
    department: "技术部",
    phone: "13800138001",
    status: "活跃",
    permissions: {
      view: true,
      edit: true,
      delete: true,
      share: true,
    },
    lastActive: "2023-10-15 14:30",
    createdAt: "2023-01-10",
  },
  {
    id: 2,
    name: "李四",
    email: "lisi@example.com",
    avatar: "/avatars/avatar-2.jpg",
    role: "编辑者",
    department: "内容部",
    phone: "13800138002",
    status: "活跃",
    permissions: {
      view: true,
      edit: true,
      delete: false,
      share: true,
    },
    lastActive: "2023-10-14 09:45",
    createdAt: "2023-02-15",
  },
  {
    id: 3,
    name: "王五",
    email: "wangwu@example.com",
    avatar: "/avatars/avatar-3.jpg",
    role: "查看者",
    department: "市场部",
    phone: "13800138003",
    status: "活跃",
    permissions: {
      view: true,
      edit: false,
      delete: false,
      share: false,
    },
    lastActive: "2023-10-13 16:20",
    createdAt: "2023-03-20",
  },
  {
    id: 4,
    name: "赵六",
    email: "zhaoliu@example.com",
    avatar: "/avatars/avatar-4.jpg",
    role: "编辑者",
    department: "销售部",
    phone: "13800138004",
    status: "离线",
    permissions: {
      view: true,
      edit: true,
      delete: false,
      share: true,
    },
    lastActive: "2023-10-05 10:15",
    createdAt: "2023-04-05",
  },
  {
    id: 5,
    name: "钱七",
    email: "qianqi@example.com",
    avatar: "/avatars/avatar-5.jpg",
    role: "查看者",
    department: "人事部",
    phone: "13800138005",
    status: "活跃",
    permissions: {
      view: true,
      edit: false,
      delete: false,
      share: false,
    },
    lastActive: "2023-10-12 14:50",
    createdAt: "2023-05-18",
  },
  {
    id: 6,
    name: "孙八",
    email: "sunba@example.com",
    avatar: "/avatars/avatar-6.jpg",
    role: "查看者",
    department: "财务部",
    phone: "13800138006",
    status: "离线",
    permissions: {
      view: true,
      edit: false,
      delete: false,
      share: false,
    },
    lastActive: "2023-09-28 11:30",
    createdAt: "2023-06-22",
  },
  {
    id: 7,
    name: "周九",
    email: "zhoujiu@example.com",
    avatar: "/avatars/avatar-7.jpg",
    role: "编辑者",
    department: "技术部",
    phone: "13800138007",
    status: "活跃",
    permissions: {
      view: true,
      edit: true,
      delete: false,
      share: true,
    },
    lastActive: "2023-10-15 08:40",
    createdAt: "2023-07-15",
  },
  {
    id: 8,
    name: "吴十",
    email: "wushi@example.com",
    avatar: "/avatars/avatar-8.jpg",
    role: "管理员",
    department: "运营部",
    phone: "13800138008",
    status: "活跃",
    permissions: {
      view: true,
      edit: true,
      delete: true,
      share: true,
    },
    lastActive: "2023-10-14 15:20",
    createdAt: "2023-08-02",
  },
  {
    id: 9,
    name: "郑十一",
    email: "zhengshiyi@example.com",
    avatar: "/avatars/avatar-9.jpg",
    role: "查看者",
    department: "客服部",
    phone: "13800138009",
    status: "活跃",
    permissions: {
      view: true,
      edit: false,
      delete: false,
      share: false,
    },
    lastActive: "2023-10-13 13:10",
    createdAt: "2023-09-10",
  },
  {
    id: 10,
    name: "刘十二",
    email: "liushier@example.com",
    avatar: "/avatars/avatar-10.jpg",
    role: "编辑者",
    department: "产品部",
    phone: "13800138010",
    status: "离线",
    permissions: {
      view: true,
      edit: true,
      delete: false,
      share: true,
    },
    lastActive: "2023-10-08 09:30",
    createdAt: "2023-10-01",
  },
];

// 角色定义
const roles = [
  { id: 1, name: "管理员", description: "拥有所有权限" },
  { id: 2, name: "编辑者", description: "可以查看和编辑内容" },
  { id: 3, name: "查看者", description: "只能查看内容" },
];

// 将部门下拉菜单改为角色下拉菜单
const roleOptions = ["全部角色", "管理员", "编辑者", "查看者"];

export default function UsersListPage() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedRole, setSelectedRole] = useState("全部角色");
  const [currentPage, setCurrentPage] = useState(1);
  const [showRoleDropdown, setShowRoleDropdown] = useState(false);
  const [showAddUserDialog, setShowAddUserDialog] = useState(false);
  const [showEditUserDialog, setShowEditUserDialog] = useState(false);
  const [showPermissionDialog, setShowPermissionDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [selectedUser, setSelectedUser] = useState(null);
  const roleDropdownRef = useRef(null);
  const itemsPerPage = 5;

  useEffect(() => {
    // 模拟API获取用户列表
    const fetchUsers = async () => {
      try {
        // 模拟延迟
        await new Promise((resolve) => setTimeout(resolve, 800));

        // 使用模拟数据
        setUsers(mockUsers);
      } catch (error) {
        console.error("获取用户列表失败:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUsers();
  }, []);

  // 关闭下拉菜单的点击外部处理函数
  useEffect(() => {
    function handleClickOutside(event) {
      if (
        roleDropdownRef.current &&
        !roleDropdownRef.current.contains(event.target)
      ) {
        setShowRoleDropdown(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // 筛选用户
  const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.phone.includes(searchQuery);

    const matchesRole =
      selectedRole === "全部角色" || user.role === selectedRole;

    return matchesSearch && matchesRole;
  });

  // 分页处理
  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
  const paginatedUsers = filteredUsers.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  const handleEditUser = (user) => {
    setSelectedUser(user);
    setShowEditUserDialog(true);
  };

  const handleEditPermissions = (user) => {
    setSelectedUser(user);
    setShowPermissionDialog(true);
  };

  const handleDeleteUser = (user) => {
    setSelectedUser(user);
    setShowDeleteDialog(true);
  };

  const confirmDeleteUser = () => {
    // 删除用户逻辑
    setUsers(users.filter((user) => user.id !== selectedUser.id));
    toast.success("用户已删除", {
      description: `用户 "${selectedUser.name}" 已成功删除。`,
    });
    setShowDeleteDialog(false);
  };

  const handleAddUser = () => {
    // 添加用户逻辑
    toast.success("用户已添加", {
      description: "新用户已成功添加到系统。",
    });
    setShowAddUserDialog(false);
  };

  const handleSaveUser = () => {
    // 保存编辑用户逻辑
    toast.success("用户已更新", {
      description: `用户 "${selectedUser.name}" 信息已更新。`,
    });
    setShowEditUserDialog(false);
  };

  const handleSavePermissions = () => {
    // 保存权限逻辑
    toast.success("权限已更新", {
      description: `用户 "${selectedUser.name}" 的权限设置已更新。`,
    });
    setShowPermissionDialog(false);
  };

  if (isLoading) {
    return (
      <div className='flex justify-center items-center h-[80vh]'>
        <div className='animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500'></div>
      </div>
    );
  }

  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <div className='container mx-auto px-4 py-8'>
      <Toaster />

      <motion.div
        initial='hidden'
        animate='visible'
        variants={fadeIn}
        transition={{ duration: 0.3 }}
      >
        {/* 页面标题和操作区 */}
        <div className='flex justify-between items-center mb-8'>
          <div>
            <h1 className='text-3xl font-bold text-gray-800 dark:text-white'>
              用户管理
            </h1>
            <p className='text-gray-500 dark:text-gray-400 mt-1'>
              创建和管理系统用户，分配用户权限和角色
            </p>
          </div>
          <Button
            onClick={() => setShowAddUserDialog(true)}
            className='bg-blue-500 hover:bg-blue-600 text-white'
          >
            <FiPlus className='mr-2' /> 添加用户
          </Button>
        </div>

        {/* 搜索和筛选区 */}
        <Card className='mb-6'>
          <CardContent className='p-4'>
            <div className='flex flex-col md:flex-row gap-4'>
              <div className='relative flex-1'>
                <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
                  <FiSearch className='text-gray-400' />
                </div>
                <Input
                  type='text'
                  placeholder='搜索用户名、邮箱、电话...'
                  className='pl-10'
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>

              {/* 角色选择器 */}
              <div className='w-full md:w-64 relative' ref={roleDropdownRef}>
                <button
                  className='w-full flex items-center justify-between px-3 py-2 text-sm border rounded-md shadow-sm bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600'
                  onClick={() => setShowRoleDropdown(!showRoleDropdown)}
                >
                  <div className='flex items-center'>
                    <FiFilter className='mr-2' />
                    <span>{selectedRole}</span>
                  </div>
                  <FiChevronDown
                    className={`transition-transform ${
                      showRoleDropdown ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {showRoleDropdown && (
                  <div className='absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg'>
                    <ul className='py-1 max-h-60 overflow-auto'>
                      {roleOptions.map((role) => (
                        <li
                          key={role}
                          className={`px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 ${
                            selectedRole === role
                              ? "bg-gray-100 dark:bg-gray-700 font-medium"
                              : ""
                          }`}
                          onClick={() => {
                            setSelectedRole(role);
                            setShowRoleDropdown(false);
                            setCurrentPage(1); // 重置为第一页
                          }}
                        >
                          {role}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 用户列表 */}
        <Card>
          <CardHeader>
            <CardTitle>用户列表</CardTitle>
            <CardDescription>
              共 {filteredUsers.length} 个用户，当前显示{" "}
              {Math.min(itemsPerPage, filteredUsers.length)} 条记录
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className='w-[250px]'>用户信息</TableHead>
                  <TableHead>角色</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>最近活动</TableHead>
                  <TableHead className='text-right'>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paginatedUsers.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} className='text-center py-8'>
                      <div className='text-gray-500 dark:text-gray-400'>
                        没有找到匹配的用户
                      </div>
                    </TableCell>
                  </TableRow>
                ) : (
                  paginatedUsers.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell>
                        <div className='flex items-center gap-3'>
                          <Avatar>
                            <AvatarImage src={user.avatar} alt={user.name} />
                            <AvatarFallback>
                              {user.name.substring(0, 1)}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <div className='font-medium'>{user.name}</div>
                            <div className='text-sm text-gray-500 dark:text-gray-400 flex items-center'>
                              <FiMail className='mr-1 h-3 w-3' /> {user.email}
                            </div>
                            <div className='text-sm text-gray-500 dark:text-gray-400 flex items-center'>
                              <FiPhone className='mr-1 h-3 w-3' /> {user.phone}
                            </div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            user.role === "管理员"
                              ? "default"
                              : user.role === "编辑者"
                              ? "secondary"
                              : "outline"
                          }
                        >
                          {user.role}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className='flex items-center'>
                          <div
                            className={`mr-2 h-2 w-2 rounded-full ${
                              user.status === "活跃"
                                ? "bg-green-500"
                                : "bg-gray-300"
                            }`}
                          ></div>
                          {user.status}
                        </div>
                      </TableCell>
                      <TableCell>{user.lastActive}</TableCell>
                      <TableCell className='text-right'>
                        <div className='flex justify-end gap-2'>
                          <Button
                            variant='outline'
                            size='icon'
                            onClick={() => handleEditUser(user)}
                            title='编辑用户'
                          >
                            <FiEdit className='h-4 w-4' />
                          </Button>
                          <Button
                            variant='outline'
                            size='icon'
                            onClick={() => handleEditPermissions(user)}
                            title='设置权限'
                          >
                            <FiShield className='h-4 w-4' />
                          </Button>
                          <Button
                            variant='outline'
                            size='icon'
                            onClick={() => handleDeleteUser(user)}
                            className='text-red-500 hover:text-red-700'
                            title='删除用户'
                          >
                            <FiTrash2 className='h-4 w-4' />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        {/* 分页控件 */}
        {totalPages > 1 && (
          <div className='flex justify-center mt-6'>
            <div className='flex items-center space-x-2'>
              <Button
                variant='outline'
                size='sm'
                onClick={() => {
                  if (currentPage > 1) setCurrentPage(currentPage - 1);
                }}
                disabled={currentPage === 1}
                className={`${
                  currentPage === 1
                    ? "opacity-50 cursor-not-allowed"
                    : "hover:bg-gray-100 dark:hover:bg-gray-700"
                }`}
              >
                <FiChevronLeft size={16} />
                <span className='ml-1'>上一页</span>
              </Button>

              <div className='flex items-center space-x-1'>
                {Array.from({ length: totalPages }, (_, i) => i + 1).map(
                  (page) => (
                    <Button
                      key={page}
                      variant={currentPage === page ? "default" : "outline"}
                      size='sm'
                      onClick={() => setCurrentPage(page)}
                      className='w-9'
                    >
                      {page}
                    </Button>
                  )
                )}
              </div>

              <Button
                variant='outline'
                size='sm'
                onClick={() => {
                  if (currentPage < totalPages) setCurrentPage(currentPage + 1);
                }}
                disabled={currentPage === totalPages}
                className={`${
                  currentPage === totalPages
                    ? "opacity-50 cursor-not-allowed"
                    : "hover:bg-gray-100 dark:hover:bg-gray-700"
                }`}
              >
                <span className='mr-1'>下一页</span>
                <FiChevronRight size={16} />
              </Button>
            </div>
          </div>
        )}
      </motion.div>

      {/* 添加用户对话框 */}
      <Dialog open={showAddUserDialog} onOpenChange={setShowAddUserDialog}>
        <DialogContent className='sm:max-w-[500px]'>
          <DialogHeader>
            <DialogTitle>添加用户</DialogTitle>
            <DialogDescription>
              创建新用户并设置基本信息和权限
            </DialogDescription>
          </DialogHeader>

          <div className='grid gap-4 py-4'>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='name' className='text-right'>
                姓名
              </Label>
              <Input
                id='name'
                className='col-span-3'
                placeholder='请输入用户姓名'
              />
            </div>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='email' className='text-right'>
                邮箱
              </Label>
              <Input
                id='email'
                className='col-span-3'
                placeholder='请输入邮箱地址'
              />
            </div>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='phone' className='text-right'>
                电话
              </Label>
              <Input
                id='phone'
                className='col-span-3'
                placeholder='请输入电话号码'
              />
            </div>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='role' className='text-right'>
                角色
              </Label>
              <Select className='col-span-3'>
                <SelectTrigger>
                  <SelectValue placeholder='选择角色' />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value='管理员'>管理员</SelectItem>
                  <SelectItem value='编辑者'>编辑者</SelectItem>
                  <SelectItem value='查看者'>查看者</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <DialogFooter>
            <Button
              variant='outline'
              onClick={() => setShowAddUserDialog(false)}
            >
              取消
            </Button>
            <Button onClick={handleAddUser}>创建用户</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 编辑用户对话框 */}
      {selectedUser && (
        <Dialog open={showEditUserDialog} onOpenChange={setShowEditUserDialog}>
          <DialogContent className='sm:max-w-[500px]'>
            <DialogHeader>
              <DialogTitle>编辑用户</DialogTitle>
              <DialogDescription>修改用户的基本信息</DialogDescription>
            </DialogHeader>

            <div className='grid gap-4 py-4'>
              <div className='grid grid-cols-4 items-center gap-4'>
                <Label htmlFor='edit-name' className='text-right'>
                  姓名
                </Label>
                <Input
                  id='edit-name'
                  className='col-span-3'
                  defaultValue={selectedUser.name}
                />
              </div>
              <div className='grid grid-cols-4 items-center gap-4'>
                <Label htmlFor='edit-email' className='text-right'>
                  邮箱
                </Label>
                <Input
                  id='edit-email'
                  className='col-span-3'
                  defaultValue={selectedUser.email}
                />
              </div>
              <div className='grid grid-cols-4 items-center gap-4'>
                <Label htmlFor='edit-phone' className='text-right'>
                  电话
                </Label>
                <Input
                  id='edit-phone'
                  className='col-span-3'
                  defaultValue={selectedUser.phone}
                />
              </div>
            </div>

            <DialogFooter>
              <Button
                variant='outline'
                onClick={() => setShowEditUserDialog(false)}
              >
                取消
              </Button>
              <Button onClick={handleSaveUser}>保存修改</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

      {/* 编辑权限对话框 */}
      {selectedUser && (
        <Dialog
          open={showPermissionDialog}
          onOpenChange={setShowPermissionDialog}
        >
          <DialogContent className='sm:max-w-[500px]'>
            <DialogHeader>
              <DialogTitle>编辑用户权限</DialogTitle>
              <DialogDescription>
                修改用户的权限和角色。更改将即时生效。
              </DialogDescription>
            </DialogHeader>

            <div className='grid gap-4 py-4'>
              <div className='grid grid-cols-4 items-center gap-4'>
                <Label htmlFor='user-info' className='text-right'>
                  用户
                </Label>
                <div className='col-span-3'>
                  <div className='font-medium'>{selectedUser.name}</div>
                  <div className='text-sm text-muted-foreground'>
                    {selectedUser.email}
                  </div>
                </div>
              </div>

              <div className='grid grid-cols-4 items-center gap-4'>
                <Label htmlFor='role' className='text-right'>
                  角色
                </Label>
                <Select defaultValue={selectedUser.role} className='col-span-3'>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value='管理员'>管理员</SelectItem>
                    <SelectItem value='编辑者'>编辑者</SelectItem>
                    <SelectItem value='查看者'>查看者</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className='grid grid-cols-4 items-start gap-4'>
                <Label className='text-right pt-2'>权限</Label>
                <div className='col-span-3 space-y-3'>
                  <div className='flex items-center space-x-2'>
                    <Checkbox
                      id='view'
                      defaultChecked={selectedUser.permissions.view}
                    />
                    <Label htmlFor='view'>查看</Label>
                  </div>
                  <div className='flex items-center space-x-2'>
                    <Checkbox
                      id='edit'
                      defaultChecked={selectedUser.permissions.edit}
                    />
                    <Label htmlFor='edit'>编辑</Label>
                  </div>
                  <div className='flex items-center space-x-2'>
                    <Checkbox
                      id='delete'
                      defaultChecked={selectedUser.permissions.delete}
                    />
                    <Label htmlFor='delete'>删除</Label>
                  </div>
                  <div className='flex items-center space-x-2'>
                    <Checkbox
                      id='share'
                      defaultChecked={selectedUser.permissions.share}
                    />
                    <Label htmlFor='share'>分享</Label>
                  </div>
                </div>
              </div>
            </div>

            <DialogFooter>
              <Button
                variant='outline'
                onClick={() => setShowPermissionDialog(false)}
              >
                取消
              </Button>
              <Button onClick={handleSavePermissions}>保存权限</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

      {/* 删除用户确认对话框 */}
      {selectedUser && (
        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>确定要删除此用户吗？</AlertDialogTitle>
              <AlertDialogDescription>
                删除用户"{selectedUser.name}
                "后将无法恢复。此用户将失去所有访问权限。
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>取消</AlertDialogCancel>
              <AlertDialogAction
                onClick={confirmDeleteUser}
                className='bg-red-600 hover:bg-red-700'
              >
                删除
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}
    </div>
  );
}
